<template>
    <div>
        <div v-if="data.data && data.data.length > 0">
            <!-- <div v-if="data.tabType == 1" class="imgbox_a">
                <div class="advertisement" v-for="(it, index) in data.data" :key="index">
                    <img :src="it.url" mode="aspectFit" :style="{ height: it.height + 'px' }" />
                </div>
            </div>
            <div v-else-if="data.tabType == 2">
                <div class="containetwo ">
                    <div v-for="(it, index) in data.data" :key="index" class="item">
                        <img :style="{ height: it.height + 'px' }" :src="it.url" />
                    </div>
                </div>
            </div>
            <div v-else-if="data.tabType == 3">
                <div class="containetwo ">
                    <div v-for="(it, index) in data.data" :key="index" class="item">
                        <img :style="{ height: it.height + 'px' }" :src="it.url" />
                    </div>
                </div>
            </div> -->
            <poster :list="data.data" :type="data.tabType"></poster>
        </div>
        <div v-else>
            <div class="image-null"><span class="el-icon-picture"></span></div>
        </div>
    </div>

</template>

<script>
import poster from './poster.vue'
export default {
    name: 'Images',
    props: ['data', 'className'],
    components: {
        poster
    },
    mounted() {
    },
    methods: {

    }
}
</script>

<style scoped lang="scss">
.image-null {
    background: #ffffff;
    height: 300px;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c1c1c1;
    width: 100%;
}

// 第一
.advertisement {
    margin: 30upx;

    img {
        width: 100% !important;
    }
}

//第二
.containetwo {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 10px;

    .item {
        width: 50%;
        box-sizing: border-box;
        border-radius: 10rpx;
        padding: 20rpx;

        img {
            width: 100% !important;
        }
    }
}

//第三</style>
